<template>
  <div class="businessArea">
    <el-form
      :model="param"
      :rules="rules"
      ref="param"
      label-width="100px"
      class="demo-ruleForm"
    >
      <!-- 标题 -->
      <div class="totaltitle">
        <el-form-item label="标题:" prop="title" class="totaltitleleft">
          <el-input
            v-model="param.title"
            placeholder="请输入内容"
            class="input1"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item prop="businessSolution" class="totaltitleright">
          <el-input
            v-model="param.businessSolution"
            placeholder="请输入内容"
            class="input2"
            clearable
          ></el-input>
        </el-form-item>
      </div>

      <div class="main">
        <el-form-item label="01-标题:" prop="businessOne" class="title1">
          <el-input
            placeholder="请输入内容"
            v-model="param.businessOne"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="02-标题:" prop="businessTwo" class="title1">
          <el-input
            placeholder="请 输入内容"
            v-model="param.businessTwo"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="03-标题:" prop="businessThree" class="title1">
          <el-input
            placeholder="请 输入内容"
            v-model="param.businessThree"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="04-标题:" prop="businessFour" class="title1">
          <el-input
            placeholder="请 输入内容"
            v-model="param.businessFour"
            clearable
          ></el-input>
        </el-form-item>
      </div>
    </el-form>

    <!-- 取消 保存 -->
    <el-row>
      <el-button type="primary" @click="submitForm('param')">保存</el-button>
      <el-button @click="resetForm('param')">取消</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      disabled: false,
      rules: {
        title: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        businessOne: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        businessTwo: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        businessThree: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        businessFour: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        businessSolution: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ]
      },
      // 获取参数
      param: {
        businessId: '',
        title: '',
        businessOne: '',
        businessTwo: '',
        businessThree: '',
        businessFour: '',
        businessSolution: ''
      }
    }
  },
  mounted () {
    this.getbusiness1()
  },

  methods: {
    // 获取初始化数据
    async getbusiness1 () {
      const res = await this.$http.getbusiness1(this.param)
      this.param = res.data.data
      console.log(res)
    },

    submitForm (param) {
      this.$refs[param].validate(async (valid) => {
        if (valid) {
          // alert('submit!')
          const params = this.$qs.stringify(this.param)
          // console.log(params)
          const res = await this.$http.getbusiness(params)
          console.log(res)
          this.getbusiness1()
          // console.log(this.param.businessId)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.businessArea {
  .demo-ruleForm {
    .totaltitle {
      display: flex;
      .totaltitleleft {
        padding-left: 55px;
        .input1 {
          width: 306px;
          padding-left: 10px;
        }
      }
      .totaltitleright {
        display: inline-block;
        margin-left: -100px;
        .input2 {
          width: 196px;
        }
      }
    }
    .main {
      padding-left: 65px;
      .title1 {
        .el-input {
          width: 502px;
        }
      }
    }
  }
  .el-row {
    margin-left: 320px;
  }
}
</style>
